<template>
  <div class="card bg-#fff p-32px" v-loading="loading">
    <div class="flex items-center mb-16px">
      <h2 class="font-size-24px fw-500 mr-22px">
        {{ props.data.supplyTitle }}
      </h2>
      <span
        class="font-size-12px text-#fff lh-16px py-3px px-10px border-rd-2px"
        :style="tagBgStyle"
        >{{ tagName }}</span
      >
    </div>
    <div class="font-size-14px text-light">
      <span class="mr-35px"
        >发布时间：{{ props.data.createTime?.slice(0, 10) }}</span
      >
      <span class="mr-35px"
        >发布地点：{{ props.data?.provinceName }}
        {{ props.data?.cityName }}</span
      >
      <span class="mr-35px">发布人：{{ props.data?.createBy }}</span>
      <span class="mr-35px"
        >发布人公司名：{{
          props.data?.supplyUserInfo?.companyName || "-"
        }}</span
      >
      <span class="mr-35px">节点名：{{ props.data?.supplyNodeName }}</span>
    </div>
    <div class="mt-40px">
      <h5 class="font-size-18px fw-500 mb-24px">资源信息</h5>
      <div class="content-inner">
        <div>
          <label>资源描述：</label>
          <div>{{ props.data.remark }}</div>
        </div>
        <template v-if="props.data.supplyType === 1">
          <div>
            <label>供电方式：</label>
            <div>
              <dictName :value="props.data.framePowerWay" code="power_way" />
            </div>
          </div>
          <div>
            <label>供电功率：</label>
            <div>{{ props.data.framePower }}</div>
          </div>
          <div>
            <label>机柜高度：</label>
            <div>{{ props.data.frameHeight }}</div>
          </div>
          <div>
            <label>可租数量：</label>
            <div>{{ props.data.supplyNum }}</div>
          </div>
          <div>
            <label>单价：</label>
            <div>{{ props.data.framePrice }} {{props.data.priceUnit}}</div>
          </div>
        </template>
        <template v-else-if="props.data.supplyType === 2">
          <div>
            <label>运营商：</label>
            <div>
              <dictName :value="props.data.bwOperator" code="operator" />
            </div>
          </div>
          <div>
            <label>路由类型：</label>
            <div>
              <dictName :value="props.data.bwRouteType" code="route_type" />
            </div>
          </div>
          <div>
            <label>带宽单价：</label>
            <div>{{ props.data.bwBandwidthPrice }} {{props.data.priceUnit}}</div>
          </div>
          <div>
            <label>可租带宽数量：</label>
            <div>{{ props.data.bwBandwidthNum }}</div>
          </div>
          <div>
            <label>可租拥有数量：</label>
            <div>{{ props.data.bwIpNum }}个</div>
          </div>
          <div>
            <label>IP单价：</label>
            <div>{{ props.data.bwIpPrice }} {{props.data.priceUnit}}</div>
          </div>
        </template>
        <template v-else-if="props.data.supplyType === 4">
          <div>
            <label>计算资源：</label>
            <div>
              <dictName
                :value="props.data.gpuResource"
                code="gpu_resource_type"
              />
            </div>
          </div>
          <div>
            <label>网络架构：</label>
            <div>{{ props.data.gpuNet }}</div>
          </div>
          <div>
            <label>计费模式：</label>
            <div>
              {{ GPU_ABILITY_TYPE_ENUM[props.data.gpuAbilityType] }}
            </div>
          </div>
          <div>
            <label>适用场景：</label>
            <div>{{ props.data.gpuOccasion }}</div>
          </div>
          <div>
            <label>拥有数量：</label>
            <div>{{ props.data.gpuNum }}</div>
          </div>
          <div>
            <label>单价：</label>
            <div>{{ props.data.gpuPrice }} {{props.data.priceUnit}}</div>
          </div>
        </template>
      </div>
      <router-link
        v-if="showApplyBtn"
        :to="{ name: 'SupplyApply', query: { id: props.data.id } }"
      >
        <el-button
          type="primary"
          class="h-40px w-104px b-rd-2px mt-24px"
          @click="doSaveSupplyInfo"
          >申请合作</el-button
        >
      </router-link>
    </div>
  </div>
</template>

<script setup>
import {
  SOURCE_TYPE_ENUM,
  SOURCE_TYPE_TAG_COLOR_ENUM,
  GPU_ABILITY_TYPE_ENUM,
} from "@/const";
import { useUserStore } from "@/store";

const props = defineProps({
  data: {
    type: Object,
    default: () => ({}),
  },
  loading: {
    type: Boolean,
    default: false,
  },
});

const userStore = useUserStore();
const showApplyBtn = computed(
  () =>
    userStore.userInfo?.userId &&
    props.data.createUserId !== userStore.userInfo?.userId
);

const tagName = computed(() => SOURCE_TYPE_ENUM[props.data.supplyType]);
const tagBgStyle = computed(() => ({
  background: SOURCE_TYPE_TAG_COLOR_ENUM[props.data.supplyType],
}));

const doSaveSupplyInfo = () => {
  const { nickName, phonenumber } = props.data.supplyUserInfo;
  const info = {
    nickName,
    phonenumber,
  };
  sessionStorage.setItem("applySupplyInfo", JSON.stringify(info));
};
</script>
